<template>
	<el-container style="height: 100%;width:100%;padding:0 ;position:fixed; ">
	 <el-header style="width:100%;padding:0;">
	  <Navbar style="height:60px"></Navbar>
	</el-header>
	<el-main>
		<div class="calendar">
		  <el-calendar :range="range.date"  v-loading="loading"
			>
			<template #date-cell="{ data }">
				
			      <p  :class="cellClassName(data)" style="width: 100%; height: 100%;text-align: center;display: flex; flex-direction: column;
		  justify-content: center;
		  align-items: center;">
			        {{ data.day.split('-').slice(1).join('-') }}
					<p class="yidaka" style="display:none;">已打卡</p>
					<p class="weida" style="display:none;">未打卡</p>
					<p class="yfb" style="display:none;">已发布</p>
					<p class="wfb" style="display:none;">未发布</p>
					<p class="now" style="display:none;">当前</p>
		
			      </p>
			</template>
			</el-calendar>
		</div>
		<el-button @click="goti">{{datass.name}}</el-button>
		
	</el-main>
	
	</el-container>
	
	
	
  
</template>
<script lang="ts" setup>
import { defineComponent,reactive, ref ,onMounted} from 'vue';
import { ElCalendar } from 'element-plus';
import moment from 'moment';
import axios from 'axios';
import router from '@/router';
const range = ref({
      date:[new Date(2023, 1, 1), new Date(2023, 12, 31)]
})
const datass = reactive({
	name:'',
})
const goti=()=>{
	if(localStorage.getItem('auth_level')=='100'){
		router.push('/question/list')
	}else{
		router.push('/history/all')
	}
}
const level = localStorage.getItem("auth_level")
    const dakaData = ref({
		dates:[
      {date:'2023-04-01',value:true},
	   {date:'2023-04-02',value:true},
	    {date:'2023-04-03',value:false},
		 {date:'2023-04-05',value:true},
		  {date:'2023-04-11',value:true},
		   {date:'2023-04-1',value:true},
		   
    ]});
	const loading = ref (false)
	const getdaka =async () =>{
		loading.value = true
		try {
		 const response = await axios.get('/login/v1/examination/paper',{
		 	 headers: {
		 		'TOKEN': localStorage['token']
		 	  },
		 })	  
		 const data = response.data
		  if (data.code === 0) {
			  const datas = []
			  for (let i in data.data){
				  const date1 = new Date(data.data[i].post_time)
				  const formattedTime = moment(date1).format('YYYY-MM-DD')
				  if(level=="100"){
					  datass.name = "去发布题目"
					  datas.push({
					  date:formattedTime,value:true
				  }) 
				  }else{
					    datass.name = "去答题目"
					  datas.push({
					  	date:formattedTime,value:data.data[i].status
					  }) 
				  }
			  }
			  dakaData.value.dates = datas
		  } else {
		  }
		} catch (error) {
		  console.error(error)
		} finally{
			setTimeout(()=>{
				loading.value = false
			},2000)
		}
	}
    const disabledDate =(date: Date) =>{
      return date.getTime() > new Date().getTime(); // 禁用未来时间
    }
	
    const  cellClassName=(date:any)=> {
	  const date1 = new Date()
	  const formattedTime = moment(date1).format('YYYY-MM-DD')
	  if(date.day == formattedTime){
		  return { currents: true }
	  }
	  for(let i in dakaData.value.dates){
		 if (dakaData.value.dates[i].date==date.day){
			 if(dakaData.value.dates[i].value == true){
				 if(level=='100'){
					return { dakas: true }
				 }else{
					 return { daka: true }
				 }
				 
			 }else{
				  if(level=='100'){
				  	return { undakas: true }
				  }else{
					  if(dakaData.value.dates[i].date>formattedTime){
							
					  }else{
						return { undaka: true }
					  }
				  	
				  }
			 }
		 }
	  }
    }
onMounted(()=>{
	getdaka()
})

</script>

<style scoped>
.daka {
  background-color: #e7f4d9 !important;
  border: 2px solid #7cb305 !important;
  color: #7cb305 !important;
}
.dakas {
  background-color: #e7f4d9 !important;
  border: 2px solid #7cb305 !important;
  color: #7cb305 !important;
}
.daka .yidaka{
	display: block !important;
}
.undaka .weida{
	display: block !important;
}

.dakas .yfb{
	display: block !important;
}
.undakas .wfb{
	display: block !important;
}

.undakas {
  background-color: #fde2e2 !important;
  border: 2px solid #f5222d !important;
  color: #f5222d !important;
}
.undaka {
  background-color: #fde2e2 !important;
  border: 2px solid #f5222d !important;
  color: #f5222d !important;
}
.future {
  background-color: #e3e3e3 !important;
  border: none !important;
  color: #8c8c8c !important;
  cursor: not-allowed;
}
.currents {
  background-color: #bae7ff !important;
  border: 2px solid #1890ff !important;
  color: #1890ff !important;
}
.currents .now{
	display: block !important;
}

</style>
